<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('人员详情列表')"/>
    <th:block th:include="include :: datetimepicker-css"/>
    <th:block th:include="include :: bootstrap-editable-css" />
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="logininfor-form">
                <div class="select-list">
                    <ul>
                        <li>
<!--                          shiro:hasPermission="admin"-->
                            <label>部门：</label><select type="text" name="部门"
                                                                                  th:with="type=${@dict.getDept()}"
                                                                                  >
                            <option value="">所有</option>
                            <option th:each="dict : ${type}" th:text="${dict.getDeptName()}"
                                    th:value="${dict.getDeptName()}"></option>
                        </select>
                        </li>
                        <!--							<li>-->
                        <!--								<label>部门：</label><input type="text" name="部门"/>-->
                        <!--							</li>-->
                        <li>
                            <label>业务员：</label><input type="text" name="业务员"/>
                        </li>
                        <li>
                            <label>自定义码：</label><input type="text" name="自定义码"/>
                        </li>
                        <!--							<li>-->
                        <!--								<label>登录状态：</label><select name="status" th:with="type=${@dict.getType('sys_common_status')}">-->
                        <!--									<option value="">所有</option>-->
                        <!--									<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>-->
                        <!--								</select>-->
                        <!--							</li>-->

                        <li>
                            <label>药品代码：</label><input type="text" name="药品代码"/>
                        </li>
                        <li class="select-time">
                            <label>日期： </label>

                            <input type="text" class="form-control" id="laydate-demo-3" placeholder="开始时间"
                                   name="params[beginTime]">

                            <!--								<input type="text" class="form-control" id="startTime" placeholder="开始时间" name="params[beginTime]">-->
                            <!--								<input type="text" class="time-input" id="startTime" placeholder="开始时间" name="params[beginTime]"/>-->
                            <span>-</span>

                            <input type="text" class="form-control" id="laydate-demo-4" placeholder="结束时间"
                                   name="params[endTime]">
                            <!--								<input type="text" class="form-control" id="endTime" placeholder="结束时间" name="params[endTime]">-->
                            <!--								<input type="text" class="time-input" id="endTime" placeholder="结束时间" name="params[endTime]"/>-->

                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="query()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="reset()"><i
                                    class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
      <div class="btn-group-sm" id="toolbar" role="group">
        <a class="btn btn-success"  onclick="$.operate.add()">
          <i class="fa fa-plus"></i> 设置销售总业绩
        </a>
          <a class="btn btn-success"  onclick="clearStore()">
              <i class="fa fa-remove"></i> 清空缓存数据
          </a>
      </div>


        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table" data-mobile-responsive="true"></table>
        </div>
    </div>
</div>

<th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-js"/>
<th:block th:include="include :: bootstrap-table-editable-js" />
<script th:inline="javascript">
    var datas = [[${@dict.getType('sys_common_status')}]];
    var prefix = ctx + "sale/detail";

    $(function () {

        <!-- laydate示例 -->
        layui.use('laydate', function () {
            var laydate = layui.laydate;
            laydate.render({
                elem: '#laydate-demo-3',
                type: 'datetime',
                trigger: 'click'
            });
            laydate.render({
                elem: '#laydate-demo-4',
                type: 'datetime',
                trigger: 'click'
            });
        })

        $("#datetimepicker-demo-3").datetimepicker({
            format: "yyyy-mm-dd hh",
            autoclose: true
        });

        $("#datetimepicker-demo-4").datetimepicker({
            format: "yyyy-mm-dd hh",
            autoclose: true
        });
    })
    var options = {
      id: "bootstrap-table",
      url: prefix + "/list",
      createUrl: prefix + "/add",
      cleanUrl: prefix + "/clean",
      removeUrl: prefix + "/remove",
      exportUrl: prefix + "/export",
      sortName: "原单审核日期",
      sortOrder: "desc",
      modalName: "人员详情",
      escape: true,
      showPageGo: true,
      rememberSelected: true,
      showFooter: true,
      columns: [{
        field: 'state',
        checkbox: true
      },
        {
          field: '部门',
          title: '部门'
        },
        {
          field: '业务员',
          title: '业务员',
          sortable: true
        },
        {
          field: '药品名称',
          title: '药品名称',
          editable : {
            type : 'text',
            title : '名称',
            emptytext : "【名称】为空",
            validate : function(value) {
              if (value.length > 30) {
                return '名称不能超过30个字符';
              }
              if (value.length == 0) {
                return '名称不能为空';
              }
            }
          }
        },
        {

          ignore: true,
          rowspan: 0,
          colspan: 0,
          cardVisible: false
          ,
          footerFormatter: function (value) {
            var sumBalance = 0;
            var sumProfit = 0;
            for (var i in value) {
              sumBalance = parseFloat(value[0].allPersonPrice);
              sumProfit = parseFloat(value[0].allProfit);
            }
            let target=localStorage.getItem("target");
            if (target == null) {
                return "总金额：" + sumBalance + "   总实际毛利：" + sumProfit + "   总毛利率：" + ((sumProfit/sumBalance)*100).toFixed(2)+"%";
            }else {
                return "总金额：" + sumBalance + "/"+target+"(完成率:"+( ((sumBalance/target)*100).toFixed(2)+"%")+")" + "   总实际毛利：" + sumProfit + "   总毛利率：" + ((sumProfit/sumBalance)*100).toFixed(2)+"%" ;
            }

          }
        },
        {
          field: 'allPrice',
          title: '销售总金额',
          ignore: true,
          rowspan: 0,
          colspan: 0,
          cardVisible: false
        },
        {
          field: 'profit',
          title: '实际毛利',
          ignore: true,
          rowspan: 0,
          colspan: 0,
          cardVisible: false
        },
        {
          field: 'mlv',
          title: '毛利率',
          formatter: function(value, row, index) {

            return ((row.profit/row.allPrice)*100).toFixed(2)+"%";
          }
        },
        {
          field: 'bfb',
          title: '百分比',
          formatter: function(value, row, index) {
            var bfb= localStorage.getItem(row.业务员);
            if(bfb==null||bfb==""){
              return "";
            }
            return ((row.allPrice/bfb)*100).toFixed(2)+"%";
          },
          editable : {
            type : 'text',
            title : '名称',
            emptytext : "【名称】为空",
            validate : function(value) {
              if (value.length > 30) {
                return '名称不能超过30个字符';
              }
              if (value.length == 0) {
                return '名称不能为空';
              }
            }
          }
        },
        {
          field: '日期',
          title: '日期',
          sortable: true,
          visible: false

        },
        {
          title: '操作',
          align: 'center',
          formatter: function(value, row, index) {
            var actions = [];
            let name=row.业务员;
            actions.push("<a class='btn btn-default btn-xs' href='javascript:void(0)' onclick='szbfb(\""+name+"\")'><i class='fa fa-key'></i>设置百分比</a> ");
            return actions.join('');
          }
        }
      ]
    };
    function query() {
        $.table.init(options);
    }

    function reset() {
        var id = "bootstrap-table"
        $.table.destroy(id);
    }
    /* 设置百分比 */
    function szbfb(name) {
      console.log("name:"+name)
      var url = prefix + '/bfb/'+encodeURI(name);
      console.log("url:"+url)
      $.modal.open("设置百分比", url, '800', '200');
    }

    /* 清空缓存数据 */
    function clearStore() {
        localStorage.clear();
    }

</script>
</body>
</html>
